<template>
    <div class="my-padding-10">
        <!--面包屑-->
        <el-row class="my-margin-top-10">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>成长档案</el-breadcrumb-item>
                <el-breadcrumb-item>趣味测试</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>

        <!--按钮+搜索-->
        <el-row class="my-margin-top-20" :gutter="10">

            <el-col :span='20' v-show='!form.isShow'>
                <el-row :gutter='10'>
                    <el-col :span='3'>
                        <el-input size="small" placeholder="请输入学生姓名" suffix-icon="el-icon-search" :clearable='true' @clear="clearStudent" v-model="table.student_name"
                                  @keyup.enter.native="queryStudent"></el-input>
                    </el-col>
                    <el-col :span='3'>
                        <el-select v-model.number="table.grade" clearable placeholder="请选择年级" size='small' @change='gradeChange'>
                            <el-option v-for='item in table.gradeList' :key='item.value' :label='item.label' :value='item.value'></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span='3'>
                        <el-input size="small" placeholder="请输入游戏名称" suffix-icon="el-icon-search" :clearable='true' @clear="clearGame" v-model="table.game_name"
                            @keyup.enter.native="queryGame"></el-input>
                    </el-col>
                    <el-col :span='3'>
                        <el-select v-model="table.level" clearable placeholder="请选择等级" size='small' @change='queryLevel' >
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" ></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span='8' >
                        <el-date-picker size='small' @change='queryTime' v-model="table.time" type="datetimerange" :picker-options="pickerOptions2"
                                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                        </el-date-picker>
                    </el-col>
                    <el-col :span='6' style="display:none;"><br/>
                        <el-input size="small" placeholder="请输入学生姓名、年级、游戏名称、等级" suffix-icon="el-icon-search" :clearable='true' @clear="cleanKey" v-model="table.queryKey"
                            @keyup.enter.native="queryKey"></el-input>
                    </el-col>

                </el-row>
            </el-col>
        </el-row>

        <!--列表-->
        <el-row class="my-margin-top-10" v-show='!form.isShow'>
            <el-table :data='table.tableData' border stripe style="width:100%" size="small" :highlight-current-row="true" ref="multipleTable">
                <el-table-column label='学生姓名' prop="student_name" width="200"></el-table-column>
                <el-table-column label='当前年级' width="200">
                    <template slot-scope="scope">
                        <span v-if='scope.row.grade_num==1'>一年级</span>
                        <span v-if='scope.row.grade_num==2'>二年级</span>
                        <span v-if='scope.row.grade_num==3'>三年级</span>
                        <span v-if='scope.row.grade_num==4'>四年级</span>
                        <span v-if='scope.row.grade_num==5'>五年级</span>
                        <span v-if='scope.row.grade_num==6'>六年级</span>
                        <span v-if='scope.row.grade_num==7'>七年级</span>
                        <span v-if='scope.row.grade_num==8'>八年级</span>
                        <span v-if='scope.row.grade_num==9'>九年级</span>
                    </template>
                </el-table-column>
                <el-table-column label='性别' width="200">
                    <template slot-scope="scope">
                        <span v-if='scope.row.gender==1'>男</span>
                        <span v-if='scope.row.gender==0'>女</span>
                    </template>
                </el-table-column>
                <el-table-column label='游戏名称' prop="game_name" width="200"></el-table-column>
                <el-table-column label='游戏时长（S）' prop="game_time" width="120"></el-table-column>
                <el-table-column label='游戏分数' prop="game_score" width="120"></el-table-column>
                <el-table-column label='等级' prop="level" width="120"></el-table-column>

                <el-table-column label='活动时间' prop="create_time" width="140" ></el-table-column>
                <el-table-column label='操作' min-width='100' fixed="right">
                    <template slot-scope='scope'>
                        <el-button type="text"  @click="detail(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class='my-margin-top-10 my-el-pagination' @current-change="currentChangeHandle" :current-page="table.currentPage"
                :page-size="table.pageSize" layout="total, prev, pager, next, jumper" :total="table.rowCount"></el-pagination>
        </el-row>

        <el-dialog
            title="详情"
            :visible.sync="dialogVisible"
            width="30%">

                <el-form :model='form' :rules='form.rules' ref='form' size='small' label-width="80px" label-position="right">

                    <el-form-item label='学生姓名' prop="student_name">
                        <el-input v-model="form.student_name" readonly></el-input>
                    </el-form-item>

                    <el-form-item label='当前年级' prop="grade">
                        <el-input v-model="form.grade_num" readonly></el-input>
                    </el-form-item>

                    <el-form-item label='性别' prop="gender">
                        <el-input v-model="form.gender" readonly></el-input>
                    </el-form-item>

                    <el-form-item label='游戏名称' prop="game_name">
                        <el-input v-model="form.game_name" readonly></el-input>
                    </el-form-item>

                    <el-form-item label='游戏时长' prop="game_time">
                        <el-input v-model="form.game_time" readonly></el-input>
                    </el-form-item>

                    <el-form-item label='游戏分数' prop="game_score">
                        <el-input v-model="form.game_score" readonly></el-input>
                    </el-form-item>

                    <el-form-item label='等级' prop="level">
                        <el-input v-model="form.level" readonly></el-input>
                    </el-form-item>

                    <el-form-item label="备注" prop="remark">
                        <el-input type="textarea" v-model="form.remark" readonly></el-input>
                    </el-form-item>

                    <el-form-item label='活动时间' prop="create_time">
                        <el-input v-model="form.create_time" readonly></el-input>
                    </el-form-item>

                </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
    import gradeJS from '@/utils/grade.js'
    import {formatDate} from '@/utils/datetime_format.js'
    export default {
        data() {
            return {
                dialogVisible: false,
                pickerOptions2: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }],

                },
                auth:{
                    delete: false,

                },
                form: {
                    isShow: false,
                    title: '',
                    id: '',
                    grade: '',
                    gameName: '',

                },

                table: {
                    tableData: [],
                    currentPage: 1,
                    pageSize: 10,
                    rowCount: 0,
                    queryKey: '',
                    grade: '',
                    game_id: '',
                    //年级下拉选择
                    gradeList: [],
                },
                options: [{
                    value: 'A',
                    label: 'A'
                }, {
                    value: 'B',
                    label: 'B'
                }, {
                    value: 'C',
                    label: 'C'
                }, {
                    value: 'D',
                    label: 'D'
                }, {
                    value: 'E',
                    label: 'E'
                }],
                value: ''
            }

        },
        methods: {

            //删除
            toDel(row) {
                this.$confirm("是否确定删除?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                    .then(() => {
                        let p = {};
                        let url = '/stuFun/delete';
                        p.studentId = row.studentId;
                        return this.$http.fetch(url, p)
                    })
                    .then(res => {
                        this.$notify({
                            message: res.sucMsg,
                            type: 'success'
                        });
                        this.getTableData();
                    })
            },

            //选择年级
            gradeChange(value) {
                this.table.grade = value;
                this.table.currentPage = 1;
                this.getTableData();
            },
            //选择等级
            queryLevel(value){
                this.table.level = value;
                this.table.currentPage = 1;
                this.getTableData();
            },
            //时间段查询
            queryTime(value){
                this.table.time = value;
                this.table.currentPage = 1;
                this.getTableData();
            },
            //清除学生
            clearStudent() {
                this.table.studeng_name = '';
                this.table.currentPage = 1;
                this.getTableData();
            },
            //学生查询
            queryStudent() {
                this.table.currentPage = 1;
                this.getTableData();
            },
            //清除游戏
            clearGame() {
                this.table.game_name = '';
                this.table.currentPage = 1;
                this.getTableData();
            },
            //游戏查询
            queryGame() {
                this.table.currentPage = 1;
                this.getTableData();
            },

            //清空输入框
            cleanKey() {
                this.table.currentPage = 1;
                this.table.queryKey = '';
                this.getTableData();
            },
            //输入框查询
            queryKey() {
                this.table.currentPage = 1;
                this.getTableData();
            },

            //翻页
            currentChangeHandle(currentPage) {
                this.table.currentPage = currentPage;
                this.getTableData();
            },
            //查询列表
            getTableData() {
                let p = {};
                let url = '/stuFun/listQuery';
                p.start = (this.table.currentPage - 1) * this.table.pageSize;
                p.num = this.table.pageSize;
                p.key = this.table.queryKey;
                p.student_name = this.table.student_name;
                p.grade = this.table.grade;
                p.game_name = this.table.game_name;
                p.level = this.table.level;
                if(this.table.time != '' && this.table.time != null){
                    p.start_time = formatDate(new Date(this.table.time[0]),'yyyy-MM-dd hh:mm:ss');
                    p.end_time = formatDate(new Date(this.table.time[1]),'yyyy-MM-dd hh:mm:ss');
                }
                this.$http.fetch(url, p)
                    .then(res => {
                        this.table.tableData = res.data.rows;
                        this.table.rowCount = res.data.total;
                    })
            },
            //详情
            detail(row){
                this.dialogVisible = true;
                this.form.student_name = row.student_name;
                this.form.grade_num = row.grade_num;

                if(row.grade_num == 1){
                    this.form.grade_num = '一年级';
                }
                if(row.grade_num == 2){
                    this.form.grade_num = '二年级';
                }
                if(row.grade_num == 3){
                    this.form.grade_num = '三年级';
                }
                if(row.grade_num == 4){
                    this.form.grade_num = '四年级';
                }
                if(row.grade_num == 5){
                    this.form.grade_num = '五年级';
                }
                if(row.grade_num == 6){
                    this.form.grade_num = '六年级';
                }
                if(row.grade_num == 7){
                    this.form.grade_num = '七年级';
                }
                if(row.grade_num == 8){
                    this.form.grade_num = '八年级';
                }
                if(row.grade_num == 9){
                    this.form.grade_num = '九年级';
                }

                if(row.gender == 0){
                    this.form.gender = '女';
                }else{
                    this.form.gender = '男';
                }
                this.form.game_name = row.game_name;
                this.form.game_time = row.game_time;
                this.form.game_score = row.game_score;
                this.form.level = row.level;
                this.form.remark = row.remark;
                this.form.create_time = row.create_time;
            },
            //获取年级下拉
            getGradeList() {
                this.table.gradeList = gradeJS.getGradeList();
            },
            getAuth(){
                let userMenus = JSON.parse(localStorage.getItem('userMenus'))
                if(userMenus['btn-stuFun-delete']){
                    this.auth.delete = true;
                }
            }
        },
        mounted() {
            this.getAuth();
            this.getGradeList();
            this.getTableData();
        }
    }

</script>
